<!DOCTYPE html>
<html>

<head>
  <title>simple.js - example - async-validator@1.11.5</title>
  <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link href="https://a.alipayobjects.com/normalize.css/3.0.1/normalize.css" rel="stylesheet"/>
  <style>
    .highlight pre {
      padding: .8em 1em;
      font: 14px/20px Consolas, Monaco, 'Andale Mono', monospace;
      border: 1px solid #e5e8ec;
      border-radius: 3px;
      background-color: #21221d;
      background-image: -webkit-linear-gradient(#21221d 50%, #272822 50%);
      background-image: -moz-linear-gradient(#21221d 50%, #272822 50%);
      background-image: -ms-linear-gradient(#21221d 50%, #272822 50%);
      background-image: -o-linear-gradient(#21221d 50%, #272822 50%);
      background-image: linear-gradient(#21221d 50%, #272822 50%);
      background-size: 40px 40px;
      background-origin: content-box;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    .highlight pre > code {
      font-family: inherit;
      direction: ltr;
      text-align: left;
      white-space: pre;
      word-spacing: normal;
      vertical-align: 2px;
      display: block;
      -moz-tab-size: 2;
      -o-tab-size: 2;
      tab-size: 2;
      -webkit-hyphens: none;
      -moz-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
      color: #E5E5C2;
    }
  </style>
  <style>
/*

Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/

*/

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #23241f;
  -webkit-text-size-adjust: none;
}

.hljs,
.hljs-tag,
.css .hljs-rule,
.css .hljs-value,
.aspectj .hljs-function,
.css .hljs-function
.hljs-preprocessor,
.hljs-pragma {
  color: #f8f8f2;
}

.hljs-strongemphasis,
.hljs-strong,
.hljs-emphasis {
  color: #a8a8a2;
}

.hljs-bullet,
.hljs-blockquote,
.hljs-horizontal_rule,
.hljs-number,
.hljs-regexp,
.alias .hljs-keyword,
.hljs-literal,
.hljs-hexcolor {
  color: #ae81ff;
}

.hljs-code,
.hljs-title,
.css .hljs-class,
.hljs-class .hljs-title:last-child {
  color: #a6e22e;
  /*color: #e6db74;*/
}

.hljs-link_url {
  font-size: 80%;
}

.hljs-strong,
.hljs-strongemphasis {
  font-weight: bold;
}

.hljs-emphasis,
.hljs-strongemphasis,
.hljs-class .hljs-title:last-child,
.hljs-typename {
  font-style: italic;
}

.hljs-keyword,
.ruby .hljs-class .hljs-keyword:first-child,
.ruby .hljs-function .hljs-keyword,
.hljs-function,
.hljs-change,
.hljs-winutils,
.hljs-flow,
.nginx .hljs-title,
.tex .hljs-special,
.hljs-header,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-tag .hljs-title,
.hljs-value,
.alias .hljs-keyword:first-child,
.css .hljs-tag,
.css .unit,
.css .hljs-important {
  color: #f92672;
}

.hljs-function .hljs-keyword,
.hljs-class .hljs-keyword:first-child,
.hljs-aspect .hljs-keyword:first-child,
.hljs-constant,
.hljs-typename,
.hljs-name,
.css .hljs-attribute {
  color: #66d9ef;
}

.hljs-variable,
.hljs-params,
.hljs-class .hljs-title,
.hljs-aspect .hljs-title {
  color: #f8f8f2;
}

.hljs-tag .hljs-value,
.hljs-string,
.css .hljs-id,
.hljs-subst,
.hljs-type,
.ruby .hljs-class .hljs-parent,
.django .hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.django .hljs-filter .hljs-argument,
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.hljs-attr_selector,
.hljs-pseudo,
.hljs-addition,
.hljs-stream,
.hljs-envvar,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.hljs-prompt,
.hljs-link_label,
.hljs-link_url {
  color: #e6db74;
}

.hljs-comment,
.hljs-annotation,
.hljs-decorator,
.hljs-pi,
.hljs-doctype,
.hljs-deletion,
.hljs-shebang,
.apache .hljs-sqbracket,
.tex .hljs-formula {
  color: #75715e;
}

.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata,
.xml .php,
.php .xml {
  opacity: 0.5;
}
/***********/
.hljs-attribute{
  color: #a6e22e;
}
/***** node keyword ******/
.hljs-built_in{
  color: #3396dc;
  font-weight: bold;
}
  </style>
  <style>
    .container {
      width: 86%;
      max-width: 1000px;
      margin-left: auto;
      margin-right: auto;
    }

    .header p {
      color: #666;
    }

    .example {
      padding: 20px 0;
    }
  </style>

  <script>
    // Console-polyfill. MIT license.
    // https://github.com/paulmillr/console-polyfill
    // Make it safe to do console.log() always.
    (function (global) {
      'use strict';
      global.console = global.console || {};
      var con = global.console;
      var prop, method;
      var empty = {};
      var dummy = function () {
      };
      var properties = 'memory'.split(',');
      var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
      'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
      'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
      while (prop = properties.pop()) con[prop] = con[prop] || empty;
      while (method = methods.pop()) con[method] = con[method] || dummy;
    })(typeof window === 'undefined' ? this : window);
    // Using `this` for web workers while maintaining compatibility with browser
    // targeted script loaders such as Browserify or Webpack where the only way to
    // get to the global object is via `window`.
  </script>
  <!--[if lt IE 9]>
  <script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
  <![endif]-->
  <script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
  <script>
  if(!window.Promise) {
    document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
  }
  </script>
  
</head>

<body>
  <div class="container">
    <div class="header">
      <h1>async-validator@1.11.5</h1>

      <p>validate form asynchronous</p>
    </div>
    <div class="example" id="__react-content"></div>

    <div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint no-console:0 no-unused-vars:0 */</span>

<span class="hljs-keyword">import</span> Schema <span class="hljs-keyword">from</span> <span class="hljs-string">'async-validator'</span>;

<span class="hljs-keyword">const</span> schema = <span class="hljs-keyword">new</span> Schema({
  name: {
    type: <span class="hljs-string">'string'</span>,
    required: <span class="hljs-literal">true</span>,
    min: <span class="hljs-number">5</span>,
    max: <span class="hljs-number">10</span>,
  },
  address: {
    type: <span class="hljs-string">'object'</span>,
    required: <span class="hljs-literal">true</span>,
    fields: {
      province: {
        type: <span class="hljs-string">'string'</span>,
        required: <span class="hljs-literal">true</span>,
        min: <span class="hljs-number">4</span>,
      },
      city: {
        type: <span class="hljs-string">'string'</span>,
        message: <span class="hljs-string">'custom message'</span>,
        min: <span class="hljs-number">5</span>,
      },
      <span class="hljs-keyword">async</span>: {
        asyncValidator(rule, value, callback) {
          setTimeout(() =&gt; {
            callback(rule.message);
          }, <span class="hljs-number">100</span>);
        },
        message: <span class="hljs-string">'address async fails'</span>,
      },
    },
  },
  <span class="hljs-keyword">async</span>: {
    asyncValidator(rule, value) {
      <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-built_in">Promise</span>((resolve, reject) =&gt; {
        setTimeout(() =&gt; {
          reject([<span class="hljs-keyword">new</span> <span class="hljs-built_in">Error</span>(rule.message)]);
        }, <span class="hljs-number">100</span>);
      });
    },
    message: <span class="hljs-string">'async fails'</span>,
  },
});

schema.validate({
  name: <span class="hljs-number">2</span>,
  address: {
    city: <span class="hljs-number">2</span>,
  },
  <span class="hljs-keyword">async</span>: <span class="hljs-string">'2'</span>,
}, (errors, fields) =&gt; {
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'errors'</span>);
  <span class="hljs-built_in">console</span>.log(errors);
  <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'fields'</span>);
  <span class="hljs-built_in">console</span>.log(fields);
})
  .catch(({ errors, fields }) =&gt; {
    <span class="hljs-built_in">console</span>.log(errors, fields);
  });

<span class="hljs-built_in">console</span>.log(<span class="hljs-string">'end'</span>);
</code></pre></div>
  </div>
  <a href="http://github.com/yiminghe/async-validator">
    <img style="position: absolute; top: 0; right: 0; border: 0;"
         src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
         alt="Fork me on GitHub"
         data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
  </a>
  <script>FastClick.attach(document.body);</script>
  <script src="../common.js?nowrap"></script>
  <script src="simple.js?nowrap"></script>
</body>

</html>
